<template>
  <div class="ordering_FootTable">
    <div class="left">
      <van-sidebar v-model="active" @change="onChange">
        <van-sidebar-item title="早餐" />
        <van-sidebar-item title="中餐" />
        <van-sidebar-item title="晚餐" />
      </van-sidebar>
    </div>
    <div class="right" ref="scroll">
      <keep-alive>
        <component :is="isOrder" />
      </keep-alive>
    </div>
  </div>
</template>

<script>
import { ref, watch, watchEffect } from "vue";
import OrderBreakfast from "./OrderBreakfast";
import OrderLunch from "./OrderLunch";
import OrderDinner from "./OrderDinner";
export default {
  name: "OrderingFootTable",
  components: { OrderBreakfast, OrderLunch, OrderDinner },
  setup() {
    const active = ref(0);
    const isOrder = ref("OrderBreakfast");
    const scroll = ref();
    const time = new Date().getHours()
    watchEffect(()=>{
      if ( time <= 11){
        active.value=0
        isOrder.value='OrderBreakfast'
      }else if ( time <= 18) {
        active.value=1
        isOrder.value='OrderLunch'
      } else {
        active.value=2
        isOrder.value='OrderDinner'
      }
    })
    //切换组件（早中晚）
    const onChange = (index) => {
      isOrder.value =
        index == 0
          ? "OrderBreakfast"
          : index == 1
          ? "OrderLunch"
          : "OrderDinner";
    };
    watch(isOrder, () => {
      //切换left时 菜品列表滚动条置顶
      scroll.value.scrollTop = 0;
    });
    return {
      active,
      isOrder,
      scroll,
      onChange,
    };
  },
};
</script>

<style scoped lang="less">
.ordering_FootTable {
  display: flex;
  justify-content: space-between;
  overflow: hidden;
  .right {
    flex: auto;
    padding: 0 0.4rem;
    overflow-y: scroll;
    background-color: #fff;
  }
}
</style>
